<script setup="staffadd">
import { ref, reactive } from 'vue';
import staffHttp from '@/api/staffHttp';
import { useRouter } from 'vue-router';
import OAMain from "@/components/OAMain.vue"
import {useAuthStore} from "@/stores/auth"
import { ElMessage } from 'element-plus';


const router = useRouter();
const authStore = useAuthStore()

//只有部门的  leader 才可以给本部门新员工
let staffForm = reactive({
    email:"",
    password:"",
    realname:"",
});

const formRef = ref()

let rules = reactive({
    email: [{required:true,message:"请输入邮箱！",trigger:'blur'}],
    password: [{required:true,message:"请输入密码！",trigger:'blur'}],
    realname: [{required:true,message:"请输入真实姓名！",trigger:'blur'}],
})

const onSubmit = () =>{
    formRef.value.validate(async (valid,fields)=>{
        if(valid){
            try{
                console.log("前端发送请求。。。。")
                await staffHttp.addsStaff(staffForm.realname,staffForm.email,staffForm.password)
                ElMessage.success("员工添加成功!")
                router.push({name:'staff_list'})
            }catch(detail){
                ElMessage.error(detail)
            }
        }
    })
}
</script>

<template>
<OAMain title="新增员工">
    <el-card shadow="always">
        <el-form :rules="rules" :model="staffForm" ref="formRef" label-width="80px">
        <el-form-item label="姓名" prop="realname">
            <el-input v-model="staffForm.realname" placeholder="请输入姓名">
            </el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="email">
            <el-input v-model="staffForm.email" placeholder="请输入邮箱">
            </el-input> 
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input v-model="staffForm.password" placeholder="请输入密码" type="password">
            </el-input>
        </el-form-item>

        <el-form-item label="部门">
            <el-input readonly disabled placeholder="请输入部门" :value="authStore.user.department.name">
            </el-input>
        </el-form-item>

        <el-form-item label="领导" >
            <el-input readonly disabled :placeholder="'[' + authStore.user.department.name + ']' +  authStore.user.department.name" >
            </el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
     </el-form>
    </el-card>
</OAMain>
</template>

<style scoped></style>